import { Link, RepoLink } from '@brillout/docpress'
import { MostlyMutations } from '../../components'

Using Telefunc with [SvelteKit](https://svelte.dev/docs/kit).

## Example

- <RepoLink path="/examples/svelte-kit" />

## Add to existing app

See example of adding Telefunc to an existing app: [`d31fc02`](https://github.com/brillout/telefunc/commit/d31fc028135820281141e75a5f86025bbc0a47c1).

1. `npm install telefunc` (or `pnpm`/`yarn`)
1. Add Telefunc's Vite plugin ([example `vite.config.ts`](https://github.com/brillout/telefunc/commit/d31fc028135820281141e75a5f86025bbc0a47c1#diff-47944bdcd0c53cfef019b731e51d5de7f52adc433ee42e23d70d2786df2ccb86))
1. Add Telefunc's server middleware ([example `src/routes/_telefunc/+server.ts`](https://github.com/brillout/telefunc/commit/d31fc028135820281141e75a5f86025bbc0a47c1#diff-90d1561bb0ebcba840e0f56681c3583bc775311dac1e4489983ce3d961ac4a0c))
1. Define your first `.telefunc.js` file ([example `src/routes/Counter.telefunc.ts`](https://github.com/brillout/telefunc/commit/d31fc028135820281141e75a5f86025bbc0a47c1#diff-175c619bea5e129b791fa88edbdb23eb0db7630bde74b99661c363972db39b25))
   > `.telefunc.js` files are always server-only, regardless of where they are located. You don't need to place them in `$lib/server` nor add `.server`.
1. Optionally: globally define the type your `context` object ([example `src/telefunc.d.ts`](https://github.com/brillout/telefunc/commit/d31fc028135820281141e75a5f86025bbc0a47c1#diff-3105d009403392ee3729824908f17d97f6c8e046e1b77e060555e9c26f39d099))

## Initial Data

<MostlyMutations
  toolName="SvelteKit"
  builtInMechanism={
    <p>
      For example, we can use SvelteKit's <code>load</code> function in a <code>+page.server.js</code> file to fetch
      initial data directly from a database, see{' '}
      <a href="https://svelte.dev/docs/kit/load#Universal-vs-server">
        SvelteKit Docs &gt; Loading data &gt; Universal vs server
      </a>
      {'.'}
    </p>
  }
/>
